.box {
  border: 2px solid #333;
  box-sizing: border-box;
  margin: 30px auto;
  padding: 10px;
  display: flex;
}

.box > .left {
  width: 350px;
  height: 350px;
  margin-right: 330px;
  margin-left:250px;
  position: relative;
  /* cursor: none; */
}
.box> .mask {
  width: 100px;
  height: 100px;
  background-color: yellow;
  opacity: 0.5;
  position: absolute;
  left: 100px;
  top: 100px;
  /* 该元素不作为事件目标 */
  pointer-events: none;
  /* display: none; */
}
.box>.enlarge {
  width: 400px;
  height: 400px;
  overflow: hidden;
  position: absolute;
  left: 200px;
  top: 0;
  display: none;
 
}
.box > .right{
  position: relative;
}
.box >.enlarge >img {
  width:500px;
  height: 500px;
  position: absolute;
  left: 650px;
  top: 70px;
  z-index: 99;
}
.box > .right {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 10px;
  box-sizing: border-box;
}

.box > .right > .title {
  font-size: 20px;
  color: rgb(41, 40, 40);
  font-weight: 700;
}

.box > .right > .price {
  color:rgb(233, 24, 104);
}

.box > .right > .price > .current {
  font-size: 30px;
}

.box > .right > .price > .old {
  font-size: 20px;
  text-decoration: line-through;
  color: #ccc;
}

.box > .right > .number {
  display: flex;
}

.box > .right > .number > button {
  width: 30px;
  height: 30px;
  font-size: 22px;
}

.box > .right > .number > input {
  width: 50px;
  text-align: center;
}

.box > .right > .btns {
  display: flex;
  justify-content: space-around;
}

.box > .right > .btns > button {
  width: 45%;
  height: 50px;
  background-color: orange;
  border: none;
  color: #fff;
  border-radius: 15px;
}

.box > .right > .btns > button:nth-child(2) {
  background-color: red;
}



* {
  padding: 0;
  margin: 0;
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
}

.container {
  width: 100%;
  margin: 0 auto;
}
.container .content {
  background: #f7f7f7;
  padding-top: 20px;
}
.container .content .detail {
  padding: 0;
  margin: 20px auto;
  width: 1090px;
  _zoom: 1;
  background: #fff;
  box-shadow: 1px 1px 4px #d3d3d3;
  position: relative;
}
.container .content .detail .detail-con {
  padding-top: 30px;
  text-align: center;
}
.container .content .detail .detail-con .con-top {
  width: 922px;
  height: 50px;
  margin: 0 auto;
  background: url(http://a0.global.jmstatic.com/f913a9706a7f67ef/detail_content.jpg) no-repeat;
}
.container .content .detail .detail-top {
  padding-top: 50px;
}
.container .content .detail ul {
  width: 1090px;
  margin: 0 auto;
  background: #f6f6f6;
  border-top: 1px solid #e5e5e5;
  border-bottom: 1px solid #e5e5e5;
  height: 52px;
  overflow: hidden;
  font-size: 14px;
  display: flex;
  align-items: center;
}
.container .content .detail ul li {
  display: inline-block;
  padding: 15px 25px;
  font-size: 14px;
  color: #333;
  border-right: 1px solid #e5e5e5;
  margin-top: 2px;
}
.container .content .content-big {
  display: flex;
  background: white;
}
.container .content .content-big .left {
  background: #f7f7f7;
  width: 702px;
}
.container .content .content-big .left .top {
  padding: 5px 0 20px 48px;
  font-size: 18px;
  overflow: hidden;
  height: 107px;
}
.container .content .content-big .left .down {
  border: 1px solid #efefef;
  overflow: hidden;
}
.container .content .content-big .right {
  margin-left: 30px;
  width: 328px;
  display: flex;
  flex-direction: column;
}
.container .content .content-big .right .big-top {
  height: 80px;
  padding: 25px;
  font-size: 38px;
}
.container .content .content-big .right .big-down {
  position: relative;
  height: 100%;
}
.container .banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.container .banner .cart {
  width: 166px;
  height: 32px;
}
.container .banner .cart a {
  background: url("http://a3.global.jmstatic.com/d0c5a0102ee9da0d/maincart.png") top left no-repeat;
  color: #565656;
  font-size: 13px;
  display: inline-block;
  width: 166px;
  height: 32px;
}
.container .banner .cart a span {
  line-height: 32px;
  padding-left: 45px;
}
.container .header {
  background: #ececec;
  width: 100%;
}
.container .header .header-content {
  font-size: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 auto;
}
.container .header .header-content ul {
  display: flex;
  align-items: center;
}
.container .header .header-content ul li {
  background: url(//a1.global.jmstatic.com/afcf4431f35e5a68/header_user_line.png) right center no-repeat;
}
.container .header .header-content ul li a {
  padding: 0 10px;
  overflow: hidden;
  color: #666;
  background: 0;
  text-align: center;
  display: inline-block;
  vertical-align: -3px;
}

.bx {
  width: 1090px;
  margin: 0 auto;
}

footer {
  overflow: hidden;
  width: 100%;
  border-top: 1px solid #ddd;
  text-align: center;
  margin-top: 100px;
  padding-top: 20px;
}
.footer p {
  line-height: 30px;
}




